<template>
  <div>
    <el-card class="box-card sure-height" style="width: 100%">
      <div slot="header" class="clearfix">
        <span>商品管理</span>
      </div>
      <div
        style="
          float: right;
          padding: 3px 0;
          display: flex;
          position: relative;
          top: -12px;
        "
      >
        <el-input v-model="keyWord"></el-input
        ><el-button type="primary" size="small" @click="findSome()"
          >搜索</el-button
        ><el-button type="success" size="small" @click="addVisible = true"
          >新增</el-button
        >
      </div>
      <el-table
        :data="
          goodData.slice((currentPage - 1) * pageSize, currentPage * pageSize)
        "
        style="width: 100%"
        :row-style="{ height: '110px' }"
      >
        <el-table-column prop="good_id" label="编号" width="180">
        </el-table-column>
        <el-table-column
          :show-overflow-tooltip="true"
          prop="goodName"
          label="商品名字"
          width="180"
        >
        </el-table-column>
        <el-table-column prop="goodPrice" label="商品价格"> </el-table-column>
        <el-table-column label="商品图片">
          <template slot-scope="scope"
            ><img
              style="width: 60px; height: 60px"
              :src="scope.row.goodImg"
              alt=""
          /></template>
        </el-table-column>
        <el-table-column prop="goodInventory" label="商品库存">
        </el-table-column>
        <el-table-column
          :show-overflow-tooltip="true"
          prop="goodIntro"
          label="商品介绍"
        >
        </el-table-column>
        <el-table-column prop="goodType" label="商品类型"> </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              :disabled="discover"
              @click="getGoodMessage(scope.row)"
              >编辑</el-button
            >
            <el-button
              size="mini"
              :disabled="discover"
              @click="deleteGoods(scope.row.good_id)"
              type="danger"
              >下架</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        align="center"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[1, 3, 5]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="goodData.length"
      >
      </el-pagination>
    </el-card>
    <!-- 添加商品 -->
    <el-dialog title="添加商品" :visible.sync="addVisible" width="40%">
      <el-form :model="addGoodsForm" label-width="120px">
        <el-form-item label="商品图片">
          <el-upload
            class="avatar-uploader"
            action="http://localhost:8888/uploadGoodImg"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
          >
            <img
              v-if="addGoodsForm.goodImg"
              :src="addGoodsForm.goodImg"
              class="avatar"
              style="width: 50px; height: 75px"
            />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="商品名字">
          <el-input v-model="addGoodsForm.goodName"></el-input>
        </el-form-item>
        <el-form-item label="商品价格">
          <el-input v-model="addGoodsForm.goodPrice"></el-input>
        </el-form-item>
        <el-form-item label="商品库存">
          <el-input v-model="addGoodsForm.goodInventory"></el-input>
        </el-form-item>
        <el-form-item label="商品介绍">
          <el-input v-model="addGoodsForm.goodIntro"></el-input>
        </el-form-item>
        <el-form-item label="商品类型">
          <el-select v-model="addGoodsForm.goodType" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button @click="addVisible = false">取 消</el-button>
        <el-button type="primary" @click="addGoods()">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 修改商品 -->
    <el-dialog title="添加商品" :visible.sync="editVisible" width="40%">
      <el-form :model="editGoodsForm" label-width="120px">
        <el-form-item label="商品名字">
          <el-input v-model="editGoodsForm.goodName"></el-input>
        </el-form-item>
        <el-form-item label="商品价格">
          <el-input v-model="editGoodsForm.goodPrice"></el-input>
        </el-form-item>
        <el-form-item label="商品介绍">
          <el-input v-model="editGoodsForm.goodIntro"></el-input>
        </el-form-item>
        <el-form-item label="商品类型">
          <el-select v-model="editGoodsForm.goodType" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.goodType"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button @click="editVisible = false">取 消</el-button>
        <el-button type="primary" @click="editGoods()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { GetAllGoods, AddGoods, DeleteGoods, EditGoods } from "../../api/goods";
export default {
  data() {
    return {
      discover: this.$store.state.discover,
      goodData: [],
      keyWord: "",
      addVisible: false,
      editVisible: false,
      currentPage: 1,
      total: "",
      pageSize: 5,
      addGoodsForm: {
        goodName: "",
        goodPrice: "",
        goodImg: "",
        goodInventory: "",
        goodIntro: "",
        goodType: "",
      },
      editGoodsForm: {
        goodName: "",
        goodPrice: "",
        goodIntro: "",
        goodType: "",
        good_id: "",
      },
      options: [
        {
          value: "意林优选",
          label: "意林优选",
        },
        {
          value: "校园风情",
          label: "校园风情",
        },
        {
          value: "励志上进",
          label: "励志上进",
        },
        {
          value: "思考社交",
          label: "思考社交",
        },
        {
          value: "小说玄幻",
          label: "小说玄幻",
        },
      ],
    };
  },
  created() {
    let data = sessionStorage.getItem("state");
    if (data == null) {
      this.$router.push("/login");
    }
    this.getAllGoods(this.keyWord);
  },
  methods: {
    getGoodMessage(row) {
      this.editGoodsForm.goodName = row.goodName;
      this.editGoodsForm.goodPrice = row.goodPrice;
      this.editGoodsForm.goodIntro = row.goodIntro;
      this.editGoodsForm.goodType = row.goodType;
      this.editGoodsForm.good_id = row.good_id;
      this.editVisible = true;
    },
    editGoods() {
      EditGoods(this.editGoodsForm).then((res) => {
        if (res.data.code == 200) {
          this.$message.success("修改成功!");
          this.editVisible = false;
          this.getAllGoods(this.keyWord);
        } else {
          this.$message.error("修改失败!");
          this.editVisible = false;
        }
      });
    },
    getAllGoods(data) {
      GetAllGoods({ goodName: data }).then((res) => {
        console.log(res);
        this.goodData = res.data.goods;
        this.total = this.goodData.length;
      });
      //   GetAllGoods(data){
      //     return instance({
      //         url: "getAllGoods",//baseURL+url  http://localhost:8888:getAllGoods
      //         method:"get",
      //         params:data
      //    } )
      // }
    },
    addGoods() {
      AddGoods(this.addGoodsForm).then((res) => {
        console.log(res);
        (this.addGoodsForm.goodName = ""),
          (this.addGoodsForm.goodPrice = ""),
          (this.addGoodsForm.goodIntro = ""),
          (this.addGoodsForm.goodType = ""),
          (this.addGoodsForm.goodImg = ""),
          (this.addGoodsForm.goodInventory = ""),
          this.getAllGoods(this.keyWord);
      });
      this.addVisible = false;
    },
    handleAvatarSuccess(res, file) {
      console.log(file.response.Url);
      this.addGoodsForm.goodImg = file.response.Url;
    },
    deleteGoods(id) {
      DeleteGoods({ good_id: id }).then((res) => {
        if (res.data.code == 200) {
          this.$message.success("下架成功!");
          this.getAllGoods(this.keyWord);
        } else {
          this.$message.console.error();
          ("下架失败!");
        }
      });
    },
    findSome() {
      this.getAllGoods(this.keyWord);
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.currentPage = 1;
      this.pageSize = val;
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
    },
  },
};
</script>

<style scoped>
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 480px;
}
.sure-height {
  height: 800px !important;
}
</style>